import Taro, { Component, Config } from '@tarojs/taro'
import { Image, View, Textarea } from '@tarojs/components'
import './index.scss'
import { AtRate } from 'taro-ui'
import { headImg } from "@/utils/utils"
import { getOrderInfo } from "@/api/orderApi"
import { addGoodsComment } from "@/api/commentApi"
import { Loading, CommentImgPicker } from "@/components/index"

const getRateText = (num:any) => {
  const arr = [ '非常差', '差', '一般', '好', '非常好' ]
  return arr[num - 1]
}

export default class Index extends Component {
  state: any
  config: Config = {
    navigationBarTitleText: '评价'
  }

  constructor() {
    super(...arguments)
    const { params } = this.$router
    this.state = {
      id: params.id,
      loading: true,
      cartList: [],
      imageList: [],
      goodsRate: {},
      goodsComment: {},
      goodsImages: {}
    }
  }

  componentWillMount() {
    this.getOrderInfo()
  }

  //  获取订单信息
  getOrderInfo() {
    const { id } = this.state
    getOrderInfo(id).then(res => {
      const { isReply, cartSnap } = res.data
      if (isReply) {
        Taro.showModal({
          title: '提示',
          content: '您已经评论过了！',
          showCancel: false,
          success () {
            Taro.navigateBack()
          }
        })
        return
      }
      const goodsRate = {}
      for (let i = 0; i < cartSnap.length; i++) {
        goodsRate[i] = 5
      }
      this.setState({
        cartList: cartSnap,
        goodsRate
      }, () => {
        this.setState({
          loading: false
        })
      })
    })
  }

  // //  评分
  // onChange() {
  //   console.log(0)
  // }

  //  商品评星
  onChangeGoodsRate(key, e) {
    const { goodsRate } = this.state
    goodsRate[key] = e
    this.setState({
      goodsRate
    })
  }

  //  上传图片
  onChangeGoodsImg(key, list) {
    const { goodsImages } = this.state
    goodsImages[key] = list
    this.setState({
      goodsImages
    })
  }

  //  确定输入商品评价
  onInputGoodsComment(key, e) {
    const { value } = e.detail
    const { goodsComment } = this.state
    goodsComment[key] = value
    this.setState({
      goodsComment
    })
  }

  //  提交评价
  onSubmitComment() {
    const { id, cartList, goodsRate, goodsImages, goodsComment } = this.state
    const list:any = []
    for (let i = 0; i < cartList.length; i++) {
      list.push({
        pics: goodsImages[i],
        shopId: cartList[i]['shopId'],
        comment: goodsComment[i],
        productScore: goodsRate[i],
        productId: cartList[i]['id'],
        productSnap: cartList[i]
      })
    }
    Taro.showLoading({ title: '请稍后', mask: true })
    addGoodsComment({ orderId: id, list }).then(() => {
      Taro.hideLoading()
      Taro.showToast({ title: '评价成功' })
      Taro.navigateBack()
    })
  }

  render() {
    const { loading, cartList, goodsImages, goodsRate } = this.state
    return (<View className='comment-page'>
      {loading && <Loading isCover/>}
      <View className='comment-scroll'>
        <View className='comment-card'>
          <View className='card-title'>请对你购买的商品进行评价~</View>
          <View className='goods-list'>
            {cartList.map((goods, key) => {
              return (<View key={goods.id} className='goods-item d-f f-d-c'>
                <View className='goods-info d-f'>
                  <Image src={headImg(goods.images)} className='goods-img'/>
                  <View className='goods-box d-f f-d-c j-c-b'>
                    <View className='goods-name t-o-e'>{goods.name}</View>
                    {goods.specSnap && <View className='goods-sku t-o-e-2'>{goods.specSnap}</View>}
                  </View>
                </View>
                <View className='goods-rate d-f a-i-c'>
                  <View className='rate-left'>评分</View>
                  <AtRate value={goodsRate[key]} size={28} margin={20} onChange={this.onChangeGoodsRate.bind(this, key)}/>
                  <View className='rate-right'>{getRateText(goodsRate[key])}</View>
                </View>
                <View className='goods-comment'>
                  <Textarea className='comment-text' onInput={this.onInputGoodsComment.bind(this, key)}/>
                  <CommentImgPicker list={goodsImages[key]} onChange={this.onChangeGoodsImg.bind(this, key)}/>
                </View>
              </View>)
            })}
          </View>
        </View>
        <View className='comment-foot f-g-5'>
          <View className='submit-btn f-g-5' hoverClass='hover-class--btn' onClick={this.onSubmitComment.bind(this)}>提交评价</View>
        </View>
      </View>
    </View>)
  }
}
